<template>
  <div id="app">
    <!-- 主要内容区域 -->
    <router-view></router-view>

    <!-- 底部导航栏 -->
    <view class="footer-nav">
      <view
        v-for="(item, index) in tabBarList"
        :key="index"
        class="footer-nav-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index, item.pagePath)"
      >
        <image :src="currentTab === index ? item.selectedIconPath : item.iconPath" class="icon"></image>
        <text>{{ item.text }}</text>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的导航项
      currentTab: 0,
      // 底部导航栏配置
      tabBarList: [
        {
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png',
          pagePath: '/pages/home/home',
        },
        {
          text: '分类',
          iconPath: '/static/tabbar/category.png',
          selectedIconPath: '/static/tabbar/category-active.png',
          pagePath: '/pages/category/category',
        },
        {
          text: '购物车',
          iconPath: '/static/tabbar/cart.png',
          selectedIconPath: '/static/tabbar/cart-active.png',
          pagePath: '/pages/cart/cart',
        },
        {
          text: '个人中心',
          iconPath: '/static/tabbar/profile.png',
          selectedIconPath: '/static/tabbar/profile-active.png',
          pagePath: '/pages/profile/profile',
        },
      ],
    };
  },
  methods: {
    // 切换导航项
    switchTab(index, pagePath) {
      this.currentTab = index;
      uni.switchTab({
        url: pagePath,
      });
    },
  },
  onLaunch() {
    console.log('App Launch');
  },
  onShow() {
    console.log('App Show');
  },
  onHide() {
    console.log('App Hide');
  },
};
</script>

<style>
/* 引入公共样式 */
/* 官方ui库 */
	@import "/common/uni.css";
	/* 第三方动画库 */
	@import "/common/animate.css";
	/* 自定义图标库 */
	@import "/common/icon.css";
	/* UI基础库 */
	@import "/common/zcm-main.css";
	
	@font-face {
	  font-family: 'iconfont';
	  src: url('/static/font/iconfont.ttf') format('truetype');
	}
	

/* 全局样式 */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 底部导航栏样式 */
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  padding: 10px 0;
}

.footer-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.footer-nav-item.active {
  color: #409eff; /* 选中项的颜色 */
}

.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
</style>